<p>
 The <b>Menu</b> displays hierarchical data as a multi-level menu. It provides rich styling for unordered lists
 of items, and can be used for both navigation and executing JavaScript commands. Items can be defined and
 initialized from HTML, or the API can be used to add and remove items.
</p>
<h3>Getting Started</h3><div class="code-sample"><h4 class="code-title">Create a HTML hierarchical list of items</h4><pre class="code prettyprint"><code>&lt;ul id="menu"&gt;
    &lt;li&gt;Item 1
        &lt;ul&gt;
            &lt;li&gt;Item 1.1&lt;/li&gt;
            &lt;li&gt;Item 1.2&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
&lt;/ul&gt;</code></pre></div><p>
 Initialization of a <strong>Menu</strong> should occur after the DOM is fully loaded. It is recommended that
 initialization the <strong>Menu</strong> occur within a handler is provided to $(document).ready().
</p><div class="code-sample"><h4 class="code-title">Initialize a Menu using a selector within $(document).ready()</h4><pre class="code prettyprint"><code>$(document).ready(function() {
    $("#menu").kendoMenu();
});</code></pre></div><div class="code-sample"><h4 class="code-title">Initialize the Menu using JSON data object</h4><pre class="code prettyprint"><code>$(document).ready(function() {
 $("#menu").kendoMenu({
  dataSource:
    [{
        text: "Item 1",
        url: "http://www.kendoui.com"                // Link URL if navigation is needed, optional.
    },
    {
        text: "&lt;b&gt;Item 2&lt;/b&gt;",
        encoded: false,                                 // Allows use of HTML for item text
        content: "text"                                 // content within an item
    },
    {
        text: "Item 3",
        imageUrl: "http://www.kendoui.com/test.jpg", // Item image URL, optional.
        items: [{                                    // Sub item collection
             text: "Sub Item 1"
        },
        {
             text: "Sub Item 2"
        }]
    },
    {
        text: "Item 4",
        spriteCssClass: "imageClass3"                // Item image sprite CSS class, optional.
    }]
 })
});</code></pre></div><h3>Customizing Menu Animations</h3>
<p>
 By default, the <b>Menu</b> uses a slide animation to expand and
 reveal sub-items as the mouse hovers. Animations can be easily
 customized using configuration properties, changing the animation
 style and delay. Menu items can also be configured to open on click
 instead of on hover.
</p><div class="code-sample"><h4 class="code-title">Changing Menu animation and open behavior</h4><pre class="code prettyprint"><code>$("#menu").kendoMenu({
 animation: {
  open: { effects: "fadeIn" },
  hoverDelay: 500
 },
 openOnClick: true
});</code></pre></div><h3>Dynamically configuring Menu items</h3>
<p>
 The <b>Menu</b> API provides several methods for dynamically adding
 or removing Items. To add items, provide the new item as a JSON
 object along with a reference item that will be used to determine the
 placement in the hierarchy.
</p>
<p>
 A reference item is simply a target Menu Item HTML element that
 already exists in the Menu. Any valid jQuery selector can be used to
 obtain a reference to the target item. For examples, see the
 <a href="../menu/api.html" title="Menu API demos">Menu API demos</a>.
 Removing an item only requires a reference to the target element that
 should be removed.
</p><div class="code-sample"><h4 class="code-title">Dynamically add a new root Menu item</h4><pre class="code prettyprint"><code>var menu = $("#menu").kendoMenu().data("kendoMenu");
menu.insertAfter(
 { text: "New Menu Item" },
 menu.element.children("li:last")
);</code></pre></div><h3>Accessing an Existing Menu</h3>
<p>
 You can reference an existing <b>Menu</b> instance via
 <a href="http://api.jquery.com/jQuery.data/">jQuery.data()</a>.
 Once a reference has been established, you can use the API to control
 its behavior.
</p><div class="code-sample"><h4 class="code-title">Accessing an existing Menu instance</h4><pre class="code prettyprint"><code>var menu = $("#menu").data("kendoMenu");</code></pre></div>
